<script setup>
  import { storeToRefs } from 'pinia'
  import { useCounterStore } from '../stores/counter'
  const countStore = useCounterStore()
  // 用storeToRefs结构才有响应性
  const { count, doubleCount, typeCount } = storeToRefs(countStore)
  const { incrementAction } = countStore
  const incrementByOthers = () => {
    // countStore.count = countStore.count + 111
    // countStore.$state = { count: 222 }
    // countStore.$patch({ count: 333 })
    // countStore.$patch((state) => { state.count = 444 })
  }
</script>

<template>
  <div>
    <div>pinia: count:{{ count }}</div>
    <div>doubleCount:{{ doubleCount }}</div>
    <div>在useCounterStore中访问useTypeStore的state, typeCount:{{ typeCount }}</div>
    <div><button @click="incrementAction">通过store里面的方法改state</button></div>
    <div><button @click="incrementByOthers">另外四种方法修改state</button></div>
  </div>
</template>
